<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.item1{grid-area: 讲台;}
		.item2{grid-area: 高级阳光SPA区;}
		.item3{grid-area: 高级避暑vip区;}
		.item4{grid-area: 超级vip区;}
		.item5{grid-area: VIP;
		}
		.grid-container{
			display: grid;
			grid-template-areas: 
			 '讲台 讲台 讲台 讲台'
			 '高级阳光SPA区 VIP VIP 高级避暑vip区'
			 '高级阳光SPA区 VIP VIP 高级避暑vip区'
			 '高级阳光SPA区 VIP VIP 高级避暑vip区'
			 '超级vip区 超级vip区 超级vip区 超级vip区';
			grid-gap: 20px;
			background-color: #7FFFD4;
			padding: 10px;
			height: 600px; 
		
		}
		.grid-container > *{
			background-color: cornsilk;
			text-align: center;
			padding: 10px;
			font-size: 30px;
			
		}
		</style>
		
	</head>
	<body>
		<div class="grid-container">
			<div class="item1">讲台</div>
			<div class="item2">高级阳光SPA区</div>
			<div class="item5">
				<div>学霸区</div>
				<div>VIP休息区</div>
				<div>VIP娱乐区</div>
			</div>
			<div class="item3">高级避暑vip区</div>
			<div class="item4">超级vip区</div>
		</div>
	</body>
</html>
